//commData.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
 * 单元文本内容
 */
export default class CommDataInput extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //value:this.props.valueObj.text,  //文本
            value:this.props.valueObj,  //文本
            dataType:"",
            note:""
        }
    }

    /**
     * Handle pressing a key when the Cell is an input element
     */
    onKeyPressOnInput = (e) => {
        if (e.key === 'Enter') {
            this.hasNewValue(e.target.value)
        }
    }

    /**
     * Handle moving away from a cell, stores the new value
     */
    onBlur = (e) => {
        this.hasNewValue(e.target.value)
    }

    /**
     * Called by the `onBlur` or `onKeyPressOnInput` event handlers,
     * it escalates the value changed event, and restore the editing state
     * to `false`.
     */
    hasNewValue = (value) => {
        this.props.onChangedCell(
            value,
        )
 //       this.setState({ editing: false })
    }


    /**
     * When a Cell value changes, re-determine the display value
     * by calling the formula calculation
     */
    onChange = (e) => {
        this.setState({ value: e.target.value })
        // this.display = this.determineDisplay({ x: this.props.x, y: this.props.y }, e.target.value)
        // this.props.updateCells()
    }

    /**
     * Calculates a cell's CSS values
     */
    calculateCss = () => {
        const inoutCss = {
            width: '100%',
            height: '100%'
        }
        return inoutCss
    }




    render(){
        const css = this.calculateCss();
        return (
            <input
                style={css}
                type="text"
                onBlur={this.onBlur}
                onKeyPress={this.onKeyPressOnInput}
                value={this.state.value}
                onChange={this.onChange}
                autoFocus
            />
        )
    }
}

